<template>
  <div class="content">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="14" style="height: 100%">
        <el-card class="box-card">
          <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
            <el-form-item label="识别码">
              <el-input v-model="queryParam.brandCode" clearable placeholder="请输入识别码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="rest">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="tableData" border style="width: 100%; height: 55vh" highlight-current-row row-key="brandId"
            @row-click="rowClick">
            <el-table-column v-for="item of tablePropsDic" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <div v-if="isImageUrl(item.prop, scope.row)">
                  <el-image :src="getImageUrl(scope.row[item.prop])"
                    :preview-src-list="[getImageUrl(scope.row[item.prop])]" fit="contain" style="height: 70px" />
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="100px">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="handleEdit(row)">编辑</el-button>
                <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => handleDelete(row)">
                  <el-button slot="reference" icon="el-icon-delete" link size="mini"
                    class="danger_button">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination" style="margin: 10px 0 0 0">
          </pagination>
        </el-card>
      </el-col>
      <el-col :span="10" style="height: 100%; padding-left: 0">
        <el-card class="box-card">
          <div class="emptyCenter" v-if="!showItem">
            <el-empty description="选中左侧表格中的列，可进行切换品牌版本"></el-empty>
          </div>
          <el-button v-if="showItem" class="button_top" icon="el-icon-plus" type="primary"
            @click="handleVerAdd">新增</el-button>
          <el-table v-if="showItem" :data="brandVerData" border style="width: 100%" height="90%">
            <el-table-column v-for="item of brandVerColumn" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <div v-if="item.prop === 'protocol'">
                  <el-tag v-show="scope.row.protocol == 0">http</el-tag>
                  <el-tag v-show="scope.row.protocol == 1">https</el-tag>
                  <el-tag v-show="scope.row.protocol == 2">socket客户端</el-tag>
                  <el-tag v-show="scope.row.protocol == 3">socket服务端</el-tag>
                  <el-tag v-show="scope.row.protocol == 4">websocket客户端</el-tag>
                  <el-tag v-show="scope.row.protocol == 5">websocket服务端</el-tag>
                </div>

                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="handleVerEdit(row)">编辑</el-button>
                <el-popconfirm class="button10Left" title="确定要删除吗？" @confirm="() => handleVerDelete(row)">
                  <el-button slot="reference" icon="el-icon-delete" link size="mini"
                    class="danger_button">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <brand-dialog ref="brandDialog" @ok="loadData" />
    <brand-ver-dialog ref="brandVerDialog" @ok="rowClick" />
  </div>
</template>

<script>
import { pageList, del } from '@/api/bas/brand'
import { getList, delVer } from '@/api/bas/brandVer'
import pagination from '@/components/pagination.vue'
import brandDialog from './brandDialog.vue'
import brandVerDialog from './brandVerDialog.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Brand',
  components: { pagination, brandDialog, brandVerDialog },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {},
      tableData: [],
      tablePropsDic: [
        { title: '识别码', prop: 'brandCode', width: '', checked: true },
        { title: '品类类型', prop: 'brandType_dictText', width: '', checked: true },
        { title: '默认端口', prop: 'devicePort', width: '', checked: true },
        { title: '默认账号', prop: 'loginName', width: '', checked: true },
        { title: '固定列示例', prop: 'fixedColUrl', width: '', checked: true },
        { title: '移动列示例', prop: 'moveColUrl', width: '', checked: true },
      ],
      showItem: false,
      brandCode: '',
      brandVerData: [],
      brandVerColumn: [
        { title: '版本号', prop: 'verNo', width: '', checked: true },
        { title: '协议类型', prop: 'protocol', width: '', checked: true },
        { title: '描述', prop: 'description', width: '', checked: true },
      ],
    }
  },

  mounted() {
    this.loadData()
  },

  methods: {
    isImageUrl(prop, row) {
      return ['fixedColUrl', 'moveColUrl'].includes(prop) && row[prop]
    },
    getImageUrl(url) {
      return `${this.uploadURL}/mjj/${url} `
    },
    // 分页的方法
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    rest() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    loadData() {
      var param = Object.assign(this.queryParam, this.searchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 打开添加的对话框
    handleAdd() {
      this.$refs.brandDialog.add()
    },
    // 编辑
    handleEdit(row) {
      this.$refs.brandDialog.edit(row)
    },
    handleDelete(row) {
      del(row.brandId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.loadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    rowClick(row) {
      this.showItem = true
      this.brandCode = row.brandCode
      this.loadVerData(row.brandCode)
    },
    loadVerData(brandCode) {
      getList({ brandCode: brandCode })
        .then((res) => {
          if (res.data.code === 200) {
            this.brandVerData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleVerAdd() {
      this.$refs.brandVerDialog.add(this.brandCode)
    },
    handleVerEdit(row) {
      this.$refs.brandVerDialog.edit(row)
    },
    handleVerDelete(row) {
      delVer(row.verId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.loadVerData(this.brandCode)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  height: 90%;

  .box-card {
    height: 100%;

    .el-card__body {
      height: 100%;
    }
  }

  .button_top {
    margin: 0 0 10px 0;
  }
}

.emptyCenter {
  height: 100%;
  display: flex;
  justify-content: center;
}

.box-card-right {
  height: 100%;
}

.box-card2 {
  height: 80% !important;
}

.box-card3 {
  height: 10%;
}
</style>
